* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(97, 124, 138);
}

li {
  list-style: none;
}

.cards {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 942px;
  height: 384px;
  color: #fff;
}

.cards > .card {
  position: relative;
  width: 262px;
  height: 358px;
  border-radius: 20px;
  transition: all 200ms linear;
}

/*
     这里不能将滤镜直接加在.card元素，而是将背景和滤镜都加在伪类上。
     因为，父元素加了滤镜，它的子元素都会一起由该滤镜改变。
     如果滤镜直接加在.card元素上，会导致上面的文字也变模糊。
*/
.cards > .card::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 20px;
  filter: blur(0) opacity(1);
  transition: all 200ms linear;
}

.cards > .card:nth-child(1) {
  background: url("./images/1.jfif") no-repeat;
  background-size: cover;
}

.cards > .card:nth-child(2) {
  background: url("./images/2.jfif") no-repeat;
  background-size: cover;
}

.cards > .card:nth-child(3) {
  background: url("./images/3.jfif") no-repeat;
  background-size: cover;
}

.cards .card:hover::before {
  /* 图像的饱和度 */
  filter: saturate(1);
  transform: scale(1.01);
  box-shadow: 0 0 10px #fff;
}

.cards .title {
  font-size: 36px;
  height: 90px;
  line-height: 90px;
  padding-left: 20px;
}

.cards .content {
  line-height: 30px;
  padding-left: 20px;
}

/* :not(selector) 否定选择器 */
.cards:hover > .card:not(:hover) {
  transform: scale(1.05);
  background-color: #fff;
  filter: blur(3px) opacity(0.8) brightness(0.8);
}
